<template>
  <div class="game-timer-container">
    <div class="timer-display">
      <div class="timer-icon">⏰</div>
      <div class="timer-content">
        <div class="timer-label">{{ timerLabel }}</div>
        <div class="timer-value" :class="timerClass">
          {{ formatTime(timeRemaining) }}
        </div>
      </div>
    </div>
    
    <div class="timer-progress">
      <div 
        class="progress-bar"
        :style="{ width: progressPercentage + '%' }"
        :class="progressClass"
      ></div>
    </div>
    
    <div v-if="showWarning" class="timer-warning">
      <span class="warning-icon">⚠️</span>
      <span class="warning-text">时间不多了！</span>
    </div>
  </div>
</template>

<script setup>
import { computed, watch } from 'vue'

const props = defineProps({
  timeRemaining: {
    type: Number,
    default: 0
  },
  totalTime: {
    type: Number,
    default: 180
  },
  isGameActive: {
    type: Boolean,
    default: false
  },
  gameStatus: {
    type: String,
    default: 'waiting' // waiting, playing, finished
  }
})

const emit = defineEmits(['time-up'])

const timerLabel = computed(() => {
  switch (props.gameStatus) {
    case 'waiting':
      return '等待开始'
    case 'playing':
      return '剩余时间'
    case 'finished':
      return '游戏结束'
    default:
      return '准备中'
  }
})

const progressPercentage = computed(() => {
  if (props.totalTime <= 0) return 0
  return Math.max(0, Math.min(100, (props.timeRemaining / props.totalTime) * 100))
})

const timerClass = computed(() => {
  if (props.timeRemaining <= 30) return 'warning'
  if (props.timeRemaining <= 60) return 'caution'
  return 'normal'
})

const progressClass = computed(() => {
  if (props.timeRemaining <= 30) return 'warning'
  if (props.timeRemaining <= 60) return 'caution'
  return 'normal'
})

const showWarning = computed(() => {
  return props.isGameActive && props.timeRemaining <= 30
})

function formatTime(seconds) {
  if (seconds <= 0) return '00:00'
  
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  
  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
}

// 监听时间变化
watch(() => props.timeRemaining, (newTime) => {
  if (newTime <= 0 && props.isGameActive) {
    emit('time-up')
  }
})
</script>

<style scoped>
.game-timer-container {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 300px;
}

.timer-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.timer-icon {
  font-size: 2rem;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.timer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timer-label {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.timer-value {
  font-size: 2.5rem;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  color: #333;
  transition: all 0.3s ease;
}

.timer-value.normal {
  color: #28a745;
}

.timer-value.caution {
  color: #ffc107;
  animation: blink 1s infinite;
}

.timer-value.warning {
  color: #dc3545;
  animation: blink 0.5s infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.timer-progress {
  width: 100%;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.progress-bar {
  height: 100%;
  transition: width 1s ease;
  border-radius: 4px;
}

.progress-bar.normal {
  background: linear-gradient(90deg, #28a745, #20c997);
}

.progress-bar.caution {
  background: linear-gradient(90deg, #ffc107, #fd7e14);
}

.progress-bar.warning {
  background: linear-gradient(90deg, #dc3545, #e83e8c);
}

.timer-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  color: #856404;
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

.warning-icon {
  font-size: 1.2rem;
}

.warning-text {
  font-weight: 600;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .game-timer-container {
    max-width: 100%;
  }
  
  .timer-value {
    font-size: 2rem;
  }
  
  .timer-icon {
    font-size: 1.5rem;
  }
}
</style> 